<template>
  <!-- 弹框选择时间或日期组件 -->
  <van-popup v-model="showPicker" position="bottom" get-container="body">
    <van-datetime-picker
      v-model="currentDate"
      :type="dateType"
      :min-date="dMinDate"
      :max-date="dMaxDate"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script>
import moment from "moment";
export default {
  props: {
    // 限制时间选择器可以选择的最小日期
    minDate: {
      default: "",
    },
    maxDate: {
      default: "",
    },
    // datehour 日期和小时，time 小时和分钟
    // datetime 完整时间，包括年月日和小时、分钟。
    // month-day 即可选择月份和日期（从 2.8.4 版本开始支持）
    // year-month 年月
    // date 年月日
    type: {
      type: String,
      default: "date",
    },
    // 时间格式：yyyy-MM-dd
    format: {
      type: String,
      default: "yyyy-MM-dd",
    },
  },
  data() {
    return {
      currentDate: "", // 默认日期 当天
      showPicker: false, // 弹框是否显示
    };
  },
  computed: {
    // 日期选择器可以选择的最大时间【没有设置的情况下为当前时间100年后】
    dMaxDate() {
      if (this.maxDate && new Date(this.maxDate).toString() != "Invalid Date") {
        return new Date(this.maxDate);
      }
      return new Date(new Date().setFullYear(new Date().getFullYear() + 100));
    },
    // 日期选择器可以选择的最小时间
    dMinDate() {
      if (this.minDate && new Date(this.minDate).toString() != "Invalid Date") {
        return new Date(this.minDate);
      }
      return new Date(1960, 0, 1);
    },
    // 日期类型
    dateType() {
      return {
        date: "date",
        daterange: "date",
        week: "date",
        month: "year-month",
        year: "date",
        datetime: "datetime",
      }[this.type];
    },
  },
  methods: {
    // 从外部打开时间选择器,datetime-回显的时间
    open(datetime) {
      this.currentDate = new Date();
      if (datetime) {
        this.currentDate = new Date(moment(datetime).format());
      }
      this.toggle(true);
    },

    // 确认选择某一日期/时刻
    onConfirm(value) {
      let dateValue = moment(value, moment.ISO_8601).format(
        this.format.toUpperCase()
      );
      this.$emit("callBack", dateValue);
      this.toggle(false);
    },

    toggle(type) {
      this.showPicker = type;
    },
  },
};
</script>
